<!--
 * @Author: Rachel 943701297@qq.com
 * @Date: 2022-07-14 10:56:04
 * @LastEditors: Rachel 943701297@qq.com
 * @LastEditTime: 2022-07-15 10:24:43
 * @FilePath: \JS\java-script-learning-notes\JSCode\轮播图.html
 * @Description: 
 * 
 * Copyright (c) 2022 by Rachel 943701297@qq.com, All Rights Reserved. 
-->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      /*
			 * 设置outer的样式
			 */
      #outer {
        /*设置宽和高*/
        width: 520px;
        height: 333px;
        /*居中*/
        margin: 50px auto;
        /*设置背景颜色*/
        background-color: greenyellow;
        /*设置padding*/
        padding: 10px 0;
        /*开启相对定位*/
        position: relative;
        /*裁剪溢出的内容*/
        overflow: hidden;
      }

      /*设置imgList*/
      #imgList {
        /*去除项目符号*/
        list-style: none;
        /*设置ul的宽度*/
        /* width: 2600px; */
        /*开启绝对定位*/
        position: absolute;
        /*设置偏移量*/
        /*
				 * 每向左移动520px，就会显示到下一张图片
				 */
        left: 0px;
      }

      /*设置图片中的li*/
      #imgList li {
        /*设置浮动*/
        float: left;
        /*设置左右外边距*/
        margin: 0 10px;
      }

      /*设置导航按钮*/
      #navDiv {
        /*开启绝对定位*/
        position: absolute;
        /*设置位置*/
        bottom: 15px;
        /*设置left值
				 	outer宽度  520
				 	navDiv宽度 25*5 = 125
				 		520 - 125 = 395/2 = 197.5
				 * */
        /* left: 197px; */
      }

      #navDiv a {
        /*设置超链接浮动*/
        float: left;
        /*设置超链接的宽和高*/
        width: 15px;
        height: 15px;
        /*设置背景颜色*/
        background-color: red;
        /*设置左右外边距*/
        margin: 0 5px;
        /*设置透明*/
        opacity: 0.5;
        /*兼容IE8透明*/
        filter: alpha(opacity=50);
      }

      /*设置鼠标移入的效果*/
      #navDiv a:hover {
        background-color: black;
      }
    </style>
  </head>
  <body>
    <!-- 创建一个外部的div，来作为大的容器 -->
    <div id="outer">
      <!-- 创建一个ul，用于放置图片 -->
      <ul id="imgList">
        <li><img src="img/1.jpg" /></li>
        <li><img src="img/2.jpg" /></li>
        <li><img src="img/3.jpg" /></li>
        <li><img src="img/4.jpg" /></li>
        <li><img src="img/5.jpg" /></li>
        <li><img src="img/1.jpg" /></li>
      </ul>
      <!--创建导航按钮-->
      <div id="navDiv">
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
      </div>
    </div>
  </body>
  <script>
    // 设置存放img的ul宽度，满足浮动在一行之中
    let imgList = document.getElementById("imgList");
    let imgArr = document.getElementsByTagName("img");
    imgList.style.width = imgArr.length * 520 + "px";
    // 设置导航方块居中
    let navDiv = document.getElementById("navDiv");
    let outer = document.getElementById("outer");
    navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + "px";
    // console.log(outer.offsetWidth + " " + navDiv.offsetWidth);
    let allA = document.getElementsByTagName("a");
    let index = 0;
    allA[index].style.backgroundColor = "black";
    for (let i = 0; i < allA.length; i++) {
      allA[i].onclick = () => {
        clearInterval(timer);
        index = i;
        setA();
        move(imgList, "left", -520 * i, 20, () => {
          // 回调函数重新开始轮播
          autoChange();
        });
      };
    }

    // 轮播
    let timer;
    function autoChange() {
      timer = setInterval(() => {
        index++;
        index %= imgArr.length;
        move(imgList, "left", -520 * index, 20, function () {
          setA();
        });
      }, 1000);
    }
    autoChange();

    // 设置a变红，选中的变为黑色
    function setA() {
      if (index >= imgArr.length - 1) {
        index = 0;
        imgList.style.left = 0;
      }
      for (let i = 0; i < allA.length; i++) {
        // 内联样式权重最高，会让hover无效，此处使用空串去除样式，就可以保留hover样式
        allA[i].style.backgroundColor = "";
      }
      allA[index].style.backgroundColor = "black";
    }

    function move(obj, attr, target, speed, callback) {
      clearInterval(obj.timer);
      let current = parseInt(window.getComputedStyle(obj, null)[attr]);
      if (current > target) {
        speed = -speed;
      }
      obj.timer = setInterval(() => {
        let oldValue = parseInt(window.getComputedStyle(obj, null)[attr]);
        let newValue = oldValue + speed;
        if (
          (speed < 0 && newValue < target) ||
          (speed > 0 && newValue > target)
        ) {
          newValue = target;
        }
        obj.style[attr] = newValue + "px";
        if (newValue == target) {
          clearInterval(obj.timer);
          callback && callback();
        }
      }, 30);
    }
  </script>
</html>
